<template>
	<view class="">
		<view :class="['header-bar', { fixed }]" :style="{
		  paddingTop: statusBarHeight + 'px',
		  backgroundColor: backgroundColor,
		  height: navBarHeight + 'upx'
		}">
			<view class="header-content">
				<view class="left">
					<slot name="left">
						<view v-if="showBack" class="back-button" @click="handleBack" >
							<image :src="backIcon" class="back-icon" />
						</view>
					</slot>
				</view>
				<view class="title"  >
					<slot name="title">
						<text :style="{ color: titleColor }">{{ title }}</text>
					</slot>
				</view>
				<view class="right">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
		<view class="header-place" :style="{paddingTop: statusBarHeight + 'px',height: navBarHeight + 'upx'}" v-if="fixed">
			
		</view>
	</view>
</template>

<script>
	export default {
		name: "HeaderBar",
		props: {
			title: {
				type: String,
				default: "标题"
			},
			backgroundColor: {
				type: String,
				default: "#FFFFFF"
			},
			titleColor: {
				type: String,
				default: "#3D3D3D"
			},
			showBack: {
				type: Boolean,
				default: false
			},
			backIcon: {
				type: String,
				default: "/static/images/tabbar/back.png" // 请确保该路径下有返回图标
			},
			fixed: {
				type: Boolean,
				default: false
			},
			height: {
				type: Number,
				default: 80 // 导航栏高度，单位 px
			},
		},
		 data() {
		    return {
		      statusBarHeight: 0, // 初始化为传入的 prop 值
		    };
		  },
		computed: {
			navBarHeight() {
				return  this.height;
			}
		},
		created() {
			if (uni.getSystemInfoSync().platform === 'h5') {
				this.statusBarHeight = 0;
			} else {
				uni.getSystemInfo({
					success: (e) => {
						this.statusBarHeight = e.statusBarHeight;
					},
					fail: () => {
						this.statusBarHeight = 20; // 设置一个默认值
					}
				});
			}
		},
		methods: {
			handleBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.header-place{
		width: 100%;
	}
	.header-bar {
		width: 100%;
		// box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		z-index: 999;

		&.fixed {
			position: fixed;
			top: 0;
			left: 0;
		}
	}

	.header-content {
		height: 100%;
		flex: 1;
		display: flex;
		justify-content: space-between;
		padding: 0 20upx;
	}

	.left,
	.right {
		min-width: 60upx;
		display: flex;
		justify-content: center;
		// background-color: red;
		align-items: center;
	}

	.title {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30upx;
	}

	.back-button {
		display: flex;
	}

	.back-icon {
		width: 32upx;
		height: 32upx;
	}
</style>